// 入口函数
$(function () {

    var laypage = layui.laypage
    var q = {
        pagenum: 1,
        pagesize: 4,
    }


    // alert('ok')
    /* 1.获取轮播图列表 */
    getSwiper()

    function getSwiper() {
        $.ajax({
            method: 'get',
            url: '/admin/swipers',
            data: q,
            success(res) {
                // console.log(res);
                // if (res.status !== 0) {
                //     return layui.layer.msg(res.message, {
                //         icon: 5
                //     })
                // }
                // 导入模板引擎
                // console.log(res);
                var tplHtml = template('tpl', res)
                // console.log(tplStr);
                $('tbody').html(tplHtml)

                // 分页渲染
                renderPage(res.total)

            }
        })
    }

    // 判断status是否等于1,如果等于1，类名为layui-bg-green
    template.defaults.imports.swiperFile = function (status) {
        return status === 1 ? 'layui-bg-green' : 'layui-bg-cyan'
    }
    // 判断status是否等于1，等于为√
    template.defaults.imports.FileStatus = function (status) {
        return status === 1 ? '√' : '×'
    }


    /* 2.修改轮播图状态 */
    $('tbody').on('click', '.layui-badge', function () {
        var id = $(this).parents('tr').prop('id')
        // console.log(id);
        var status = $(this).attr('data-status')
        // 三元表达式，判断status的值
        status == 1 ? status = 2 : status = 1
        // console.log(status);
        // console.log(status);
        $.ajax({
            method: "PUT",
            url: "/admin/swipers/" + id,
            // 弄成一个对象
            data: {
                status,
            },
            success(res) {
                // console.log(res);
                if (res.status !== 0) {
                    return layui.layer.msg(res.message, {
                        icon: 5
                    })
                }
                layui.layer.msg(res.message, {
                    icon: 6
                })
                // 重新渲染页面，并提示用户切换状态成功
                getSwiper()
                // 

            }

        })
    })

    /* 3.上传轮播图 */
    $('#uploadSwiper').on('click', function () {
        $('#myfile').click()
        console.log('ok');
    })
    $('#myfile').on('change', function () {
        //    alert('ok')
        var files = document.querySelector('#myfile').files
        // // 判断是否选择了文件
        // if (files.length <= 0) {
        //     return layui.layer.msg('请选择上传的文件')
        // }
        // 多个文件上传
        var fd = new FormData()
        for (var i = 0; i < files.length; i++) {
            fd.append('swipers', files[i])
        }
        postswiper(fd)
        // 发送ajax请求


    })

    function postswiper(fd) {
        $.ajax({
            method: "post",
            url: '/admin/swipers',
            data: fd,
            processData: false,
            contentType: false,
            success(res) {
                if (res.status !== 0) {
                    return layui.layer.msg(res.message, {
                        icon: 5
                    })
                }
                layui.layer.msg(res.message, {
                    icon: 6
                })
                getSwiper()
            }
        })
    }
    /* 4、删除轮播图 */
    $('tbody').on('click', '.delete', function (e) {

        // console.log('ok');
        var id = $(this).parents('tr').prop('id')
        var len = $('.delete').length
        // console.log(id);
        layer.confirm('您确定删除吗?', {
            icon: 3,
            title: '提示'
        }, function (index) {
            $.ajax({
                method: "delete",
                url: '/admin/swipers/' + id,
                success(res) {
                    // console.log(res);

                    //do something
                    if (res.status !== 0) {
                        return layui.layer.msg(res.message, {
                            icon: 5
                        })
                    }
                    layui.layer.msg(res.message, {
                        icon: 6
                    })
                    if (len === 1) {
                        // 如果已经是1 ，不需要-1
                        q.pagenum = q.pagenum === 1 ? 1 : q.pagenum - 1
                    }
                    getSwiper()

                }
            });
            layer.close(index);



        })

    })

    /* 5 .--- 扩展功能一：分页 */
    /*效果三： 分页功能 */
    // 把一个变量，把参数保存到单独的对象中

    function renderPage(total) {
        //使用layui.page
        layui.laypage.render({
            elem: 'pageBox', //代码容器
            count: total, //数据总数
            curr: q.pagenum, //起始页
            limit: q.pagesize, //
            limits: [2, 4, 6, 8, 10], //每页展示
            layout: ['limit', 'page', 'prev', 'next', 'count', 'skip'],
            jump: function (obj, first) {
                if (!first) {
                    //获取当前单击的页码值，修改参数对象q
                    q.pagenum = obj.curr;
                    //获取每页条数，并设置参数对象q
                    q.pagesize = obj.limit;
                    // q.pagesize = obj.limit;
                    getSwiper()
                    //do something
                }
            }
        })
    }
})